<template>
    <div class="news_list">
       <ul >
        <li class="news">
          <router-link  class="routerbox" to="dialogue">
          <div class="head">
             <img src="~images/aimer.jpg" alt="">
          </div>
          <div class="data">
              <div class="name">Jansi_cc <span>13:53</span></div>
              <p>这样的活动看起来很有意思，想参加的话如何</p>
          </div>
          </router-link>
        </li>
           <li class="news">
              <router-link  class="routerbox" to="dialogue">
          <div class="head">
             <img src="~images/xitong.png" alt="">
          </div>
          <div class="data">
              <div class="name">系统通知 <span>15:53</span></div>
              <p>您报名的活动还有30分钟就要开始了，请准活动还有30分请准活动还有30分</p>
          </div>
          </router-link>
        </li>  
         <li class="news">
          <div class="head">
             <img src="~images/aimertwo.jpg" alt="">
          </div>
          <div class="data">
              <div class="name">家博会小冰 <span>12:53</span></div>
              <p>这样的活动看起来很有意思，想参加的话如何</p>
          </div>
        </li>
      </ul>  
    </div>
</template>
<script>
  
</script>
<style lang="stylus">
  .news_list 
    border-top 1px solid #DDDDDD
    .news
      display flex
      flex-flow row
      height 76px
      border-bottom 1px solid #DDDDDD
      align-items center
      justify-content center
      padding-left 10px
      background-color: #fff;
      .routerbox
         display flex
         width 100%
      .head
        width 50px
        height 50px 
        img
          width 100%
      .data
        flex 1
        margin-left 15px
        padding-bottom 3px
        padding-right 12px
        text-overflow  ellipsis
        width 18%
        .name
          color #666666
          font-size 18px
          padding-bottom 5px
          position relative
          span 
            position absolute
            right 0
            font-size 12px
            color #CCCCCC
        p 
          font-size 13px
          color #999999
          width 95%
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
</style>
